<template>
    <div class="app-container">
        <Ht-search-form
            :queryParams="queryParams"
            :outputQueryParams="queryParams"
            :formOptions="formOptions"
            :advOptions="[]"
            ></Ht-search-form>
        <ht-table
            ref="dataTable"
            :queryParams="queryParams"
            :randomRowKey="true"
            :showSerialNumber="false"
            :dictMap="dictMap"
            :reqConfig="reqConfig"
            :opButtonList="opButtonList"
            :tableBindColumns="tableBindColumns"
            sortType="close"
        >
        </ht-table>
        <edit :dictMap="dictMap" ref="editDialog" @editComplete="editComplete"></edit>
    </div>
</template>
<script>
import { apiUrlConfig,del } from "@/api/cnaps/flowWidget/index";
import { listPageMixin } from "@/libs/listPageMixin";
import Edit from './component/Edit'
export default {
  name: "FlowWidget",
  mixins: [listPageMixin],
  components: {
    Edit
  },
  data() {
    return {
      reqConfig: apiUrlConfig,
      queryParams: {
        name: '',
        category: ''
      },
      formOptions: [
        {
            type: "input",
            prop: 'name',
            defaultAttr: {
                label: '名称',
                placeholder: '请输入名称'
            }
        },
        {
            type: "input",
            prop: 'category',
            defaultAttr: {
                label: '分组名称',
                placeholder: '请输入分组名称'
            }
        }
      ],
      opButtonList: () => {
        return [
            {
                label: '新增',
                type: 'primary',
                actionType: 'add',
                clickFun: () => {
                    this.handleAction('add')
                }
            }
        ]
      },
      tableBindColumns: [
        {
          label: "组件名称",
          prop: "name",
          width: 180,
        },
        {
          label: "分组名称",
          prop: "category",
        },
        
        {
          label: "组件处理",
          prop: "bean",
        },
        {
          label: "标题",
          prop: "title",
        },
        {
          label: "简短描述",
          prop: "shortDescription",
          width: 180,
        },
        {
          label: '操作',
          type: 'operate',
          buttonList: (row) => [
            {
              label: '编辑',
              doFunc: (rowData) => {
                this.handleAction('update',rowData)
              }
            },
            {
              label: '删除',
              doFunc: (rowData) => {
                this.handleAction('del',rowData)
              }
            }
          ]
        }

      ],
    };
  },
  mounted() {},
  methods: {
    handleAction(type,row = {}) {
      switch(type) {
          case 'add':
            this.$refs.editDialog.show('',false)
            break;
          case 'update':
            this.$refs.editDialog.show(row.name,true)
            break;
          case 'del':
          this.$confirm('确认要删除这个组件吗', '提示', {
                  distinguishCancelAndClose: true,
                  confirmButtonText: '确定',
                  cancelButtonText: '取消'
                })
                  .then(() => {
                    del(row.name).then(res => {
                      this.$message({
                        type: 'success',
                        message: '删除成功'
                      });
                      this.doQuery()
                    })
                    
                  })
                  .catch(action => {
                    
                  });
            break;
        }
    },
    editComplete(state) {
      this.doQuery()
    }
  },
};
</script>